<!-- 操作符选择器组件 -->
<template>
  <div class="w-full">
    <el-select
      v-model="localValue"
      placeholder="请选择操作符"
      @change="handleChange"
      class="w-full"
    >
      <el-option
        v-for="operator in availableOperators"
        :key="operator.value"
        :label="operator.label"
        :value="operator.value"
      >
        <div class="flex items-center justify-between w-full py-4px">
          <div class="flex items-center gap-8px">
            <div class="text-14px font-500 text-[var(--el-text-color-primary)]">
              {{ operator.label }}
            </div>
            <div
              class="text-12px text-[var(--el-color-primary)] bg-[var(--el-color-primary-light-9)] px-6px py-2px rounded-4px font-mono"
            >
              {{ operator.symbol }}
            </div>
          </div>
          <div class="text-12px text-[var(--el-text-color-secondary)]">
            {{ operator.description }}
          </div>
        </div>
      </el-option>
    </el-select>
  </div>
</template>

<script setup lang="ts">
import { useVModel } from '@vueuse/core'
import {
  IotRuleSceneTriggerConditionParameterOperatorEnum,
  IoTDataSpecsDataTypeEnum
} from '@/views/iot/utils/constants'

/** 操作符选择器组件 */
defineOptions({ name: 'OperatorSelector' })

const props = defineProps<{
  modelValue?: string
  propertyType?: string
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
  (e: 'change', value: string): void
}>()

const localValue = useVModel(props, 'modelValue', emit)

// 基于枚举的操作符定义
const allOperators = [
  {
    value: IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value,
    label: IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.name,
    symbol: '=',
    description: '值完全相等时触发',
    example: 'temperature = 25',
    supportedTypes: [
      IoTDataSpecsDataTypeEnum.INT,
      IoTDataSpecsDataTypeEnum.FLOAT,
      IoTDataSpecsDataTypeEnum.DOUBLE,
      IoTDataSpecsDataTypeEnum.TEXT,
      IoTDataSpecsDataTypeEnum.BOOL,
      IoTDataSpecsDataTypeEnum.ENUM
    ]
  },
  {
    value: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_EQUALS.value,
    label: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_EQUALS.name,
    symbol: '≠',
    description: '值不相等时触发',
    example: 'power != false',
    supportedTypes: [
      IoTDataSpecsDataTypeEnum.INT,
      IoTDataSpecsDataTypeEnum.FLOAT,
      IoTDataSpecsDataTypeEnum.DOUBLE,
      IoTDataSpecsDataTypeEnum.TEXT,
      IoTDataSpecsDataTypeEnum.BOOL,
      IoTDataSpecsDataTypeEnum.ENUM
    ]
  },
  {
    value: IotRuleSceneTriggerConditionParameterOperatorEnum.GREATER_THAN.value,
    label: IotRuleSceneTriggerConditionParameterOperatorEnum.GREATER_THAN.name,
    symbol: '>',
    description: '值大于指定值时触发',
    example: 'temperature > 30',
    supportedTypes: [
      IoTDataSpecsDataTypeEnum.INT,
      IoTDataSpecsDataTypeEnum.FLOAT,
      IoTDataSpecsDataTypeEnum.DOUBLE,
      IoTDataSpecsDataTypeEnum.DATE
    ]
  },
  {
    value: IotRuleSceneTriggerConditionParameterOperatorEnum.GREATER_THAN_OR_EQUALS.value,
    label: IotRuleSceneTriggerConditionParameterOperatorEnum.GREATER_THAN_OR_EQUALS.name,
    symbol: '≥',
    description: '值大于或等于指定值时触发',
    example: 'humidity >= 80',
    supportedTypes: [
      IoTDataSpecsDataTypeEnum.INT,
      IoTDataSpecsDataTypeEnum.FLOAT,
      IoTDataSpecsDataTypeEnum.DOUBLE,
      IoTDataSpecsDataTypeEnum.DATE
    ]
  },
  {
    value: IotRuleSceneTriggerConditionParameterOperatorEnum.LESS_THAN.value,
    label: IotRuleSceneTriggerConditionParameterOperatorEnum.LESS_THAN.name,
    symbol: '<',
    description: '值小于指定值时触发',
    example: 'temperature < 10',
    supportedTypes: [
      IoTDataSpecsDataTypeEnum.INT,
      IoTDataSpecsDataTypeEnum.FLOAT,
      IoTDataSpecsDataTypeEnum.DOUBLE,
      IoTDataSpecsDataTypeEnum.DATE
    ]
  },
  {
    value: IotRuleSceneTriggerConditionParameterOperatorEnum.LESS_THAN_OR_EQUALS.value,
    label: IotRuleSceneTriggerConditionParameterOperatorEnum.LESS_THAN_OR_EQUALS.name,
    symbol: '≤',
    description: '值小于或等于指定值时触发',
    example: 'battery <= 20',
    supportedTypes: [
      IoTDataSpecsDataTypeEnum.INT,
      IoTDataSpecsDataTypeEnum.FLOAT,
      IoTDataSpecsDataTypeEnum.DOUBLE,
      IoTDataSpecsDataTypeEnum.DATE
    ]
  },
  {
    value: IotRuleSceneTriggerConditionParameterOperatorEnum.IN.value,
    label: IotRuleSceneTriggerConditionParameterOperatorEnum.IN.name,
    symbol: '∈',
    description: '值在指定列表中时触发',
    example: 'status in [1,2,3]',
    supportedTypes: [
      IoTDataSpecsDataTypeEnum.INT,
      IoTDataSpecsDataTypeEnum.FLOAT,
      IoTDataSpecsDataTypeEnum.TEXT,
      IoTDataSpecsDataTypeEnum.ENUM
    ]
  },
  {
    value: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_IN.value,
    label: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_IN.name,
    symbol: '∉',
    description: '值不在指定列表中时触发',
    example: 'status not in [1,2,3]',
    supportedTypes: [
      IoTDataSpecsDataTypeEnum.INT,
      IoTDataSpecsDataTypeEnum.FLOAT,
      IoTDataSpecsDataTypeEnum.TEXT,
      IoTDataSpecsDataTypeEnum.ENUM
    ]
  },
  {
    value: IotRuleSceneTriggerConditionParameterOperatorEnum.BETWEEN.value,
    label: IotRuleSceneTriggerConditionParameterOperatorEnum.BETWEEN.name,
    symbol: '⊆',
    description: '值在指定范围内时触发',
    example: 'temperature between 20,30',
    supportedTypes: [
      IoTDataSpecsDataTypeEnum.INT,
      IoTDataSpecsDataTypeEnum.FLOAT,
      IoTDataSpecsDataTypeEnum.DOUBLE,
      IoTDataSpecsDataTypeEnum.DATE
    ]
  },
  {
    value: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_BETWEEN.value,
    label: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_BETWEEN.name,
    symbol: '⊄',
    description: '值不在指定范围内时触发',
    example: 'temperature not between 20,30',
    supportedTypes: [
      IoTDataSpecsDataTypeEnum.INT,
      IoTDataSpecsDataTypeEnum.FLOAT,
      IoTDataSpecsDataTypeEnum.DOUBLE,
      IoTDataSpecsDataTypeEnum.DATE
    ]
  },
  {
    value: IotRuleSceneTriggerConditionParameterOperatorEnum.LIKE.value,
    label: IotRuleSceneTriggerConditionParameterOperatorEnum.LIKE.name,
    symbol: '≈',
    description: '字符串匹配指定模式时触发',
    example: 'message like "%error%"',
    supportedTypes: [IoTDataSpecsDataTypeEnum.TEXT]
  },
  {
    value: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_NULL.value,
    label: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_NULL.name,
    symbol: '≠∅',
    description: '值非空时触发',
    example: 'data not null',
    supportedTypes: [
      IoTDataSpecsDataTypeEnum.INT,
      IoTDataSpecsDataTypeEnum.FLOAT,
      IoTDataSpecsDataTypeEnum.DOUBLE,
      IoTDataSpecsDataTypeEnum.TEXT,
      IoTDataSpecsDataTypeEnum.BOOL,
      IoTDataSpecsDataTypeEnum.ENUM,
      IoTDataSpecsDataTypeEnum.DATE
    ]
  }
]

// 计算属性：可用的操作符
const availableOperators = computed(() => {
  if (!props.propertyType) {
    return allOperators
  }
  return allOperators.filter((op) =>
    (op.supportedTypes as any[]).includes(props.propertyType || '')
  )
})

// 计算属性：当前选中的操作符
const selectedOperator = computed(() => {
  return allOperators.find((op) => op.value === localValue.value)
})

/**
 * 处理选择变化事件
 * @param value 选中的操作符值
 */
const handleChange = (value: string) => {
  emit('change', value)
}

/** 监听属性类型变化 */
watch(
  () => props.propertyType,
  () => {
    // 如果当前选择的操作符不支持新的属性类型，则清空选择
    if (
      localValue.value &&
      selectedOperator.value &&
      !(selectedOperator.value.supportedTypes as any[]).includes(props.propertyType || '')
    ) {
      localValue.value = ''
    }
  }
)
</script>

<style scoped>
:deep(.el-select-dropdown__item) {
  height: auto;
  padding: 8px 20px;
}
</style>
